<template>
  <section>
  	<div class="model mywork">
  		<img :src="IMGBASE64.LISHITONGZHI2X" class="pink">
  		<span class="title">历史工作</span>
  		<div class="kong"></div>
  		<template>
				<el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
					<el-table-column prop="id" label="#" width="70" align="center"></el-table-column>
					<el-table-column prop="content" label="内容" align="center" :show-overflow-tooltip='true'></el-table-column>
					<el-table-column prop="file" label="附件" align="center"></el-table-column>
					<el-table-column prop="sender" label="发布人" align="center"></el-table-column>
					<el-table-column prop="createTimeFormat" label="发布时间" min-width="150" align="center"></el-table-column>
          <el-table-column prop="finishStatus" label="未完成人员" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button type="text" @click="delect(scope.index, scope.row, $event)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
  		</template>
  	</div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <span>{{detailsForm.content}}</span>
        <div class="detailsPeople">
          <span>{{detailsForm.people}}</span></br>
          <span>{{detailsForm.time}}</span>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isDetails"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      isDetails: false,
      detailsForm: {
        content: null,
        people: null,
        time: null
      },
      total: 0,
      page: 1,
      paging: true,
      tablemsg: [{
        id: '1',
        con: '请所有老师首次登录办公系统后',
        file: '有',
        people: '李俊义',
        time: '2015/09/15 15:31:00',
        Npeo: '12/30',
        status: true,
        yes: false,
        no: false
      },
      {
        id: '2',
        con: '请所有老师首次登录办公系统后',
        file: '有',
        people: '李俊义',
        time: '2015/09/15 15:31:00',
        Npeo: '12/30',
        status: false,
        yes: false,
        no: false
      },
      {
        id: '3',
        con: '请所有老师首次登录办公系统后',
        file: '有',
        people: '李俊义',
        time: '2015/09/15 15:31:00',
        Npeo: '12/30',
        status: true,
        yes: false,
        no: false
      }]
    }
  },
  mounted () {
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    this.xtoken = localStorage.xtoken
    this.$http.post(this._httpUrl + 'coordinationOffice/historyWork', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data.content)
        this.tablemsg = response.data.data.rows
        // for (var i = 0; i < this.tablemsg.length; i++) {
        //   console.log(this.tablemsg[i].content.length)
        //   if (this.tablemsg[i].content.length >= 9) {
        //     this.tablemsg[i].content = this.tablemsg[i].content.substring(0, 7)
        //   }
        // }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.content = rows.content
        this.detailsForm.people = rows.sender
        this.detailsForm.time = rows.createTimeFormat
        this.isDetails = !this.isDetails
      }
    },
    delect (index, row, ev) {
      // console.log(ev)
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      // console.log(ev.path[4].cells[0].innerText)
      this.$http.post(this._httpUrl + 'coordinationOffice/historyWork/del?officeId=' + parseInt(ev.path[4].cells[0].innerText), {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      })
      this.tablemsg.splice(index, 1)
    },
    detailsShow () {
      this.isDetails = !this.isDetails
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.detailsPeople{
  width: 100%;
  text-align: right;
}
</style>
